<template>
  <van-field
    required
    :label="label"
    label-width="100"
    :rules="rules"
    :name="name"
    :readonly="disabled"
  >
    <template #input>
      <van-uploader
        v-model="fileList"
        :after-read="upload"
        @delete="delFile"
        :disabled="disabled"
        :class="disabled?'disabled':''"
      />
    </template>
  </van-field>
</template>

<script>

import { upload_file, get_files } from "@/api/user.js";
import uuid from "@/utils/uuid";
import {mapGetters} from 'vuex'
export default {
  name: "",
  components: {
    'van-uploader':Uploader
  },
  props: {
    name: {
      // required:true,
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default() {
        return [{ required: true, message: "请上传" }];
      },
    },
    bizId: {
      type: String,
      default: "",
    },
    bizType: {
      required: true,
      type: String,
      default: "",
    },
    label: {
      required: true,
      type: String,
      default: "附件",
    },
  },
  watch: {
    bizId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.initFileList(val);
        } else {
          return
        }

      },
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  computed: {
    ...mapGetters(["fileUrl"]),
  },
  created() { },
  mounted() { },
  methods: {
    delFile(file) {
      this.fileList = this.fileList.filter((item) => item.uuid != file.uuid);
      this.calEmitInfo();
    },
    upload(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let data = new FormData();
      data.append("file", file.file);
      file.uuid = uuid.uuid();
      upload_file(data)
        .then((res) => {
          if (res.succeed) {
            file.status = "done";
            file.message = "";
            //   如果上传成功了
            file.url = `${this.fileUrl}${res.data.url}`;
            file.imgId = res.data.id;
            console.log(this.fileList)
            this.calEmitInfo();
          } else {
            //   如果上传失败
            file.status = "failed";
            file.message = "上传失败";
          }
        })
        .catch(() => {
          file.status = "failed";
          file.message = "上传失败";
        });
    },
    initFileList(bizId) {
      let params = {
        bizId: bizId,
        bizType: this.bizType,
      };
      get_files(params).then((res) => {
        let list = [];
        if (res.data.length > 0) {
          res.data.map((item) => {
            list.push({
              url: `${this.fileUrl}${item.url}`,
              imgId: item.id,
              uuid: uuid.uuid(),
            });
          });
          this.fileList = list;
          this.calEmitInfo();
        }
      });
    },
    calEmitInfo() {
      let ids = "";
      this.fileList.map((item) => {
        ids = ids + item.imgId + ",";
      });
      this.$emit("success", ids, this.bizType);
    },
  },
};
</script>

<style scoped lang="less">
.van-uploader.disabled {
  /deep/ .van-uploader__upload {
    display: none;
  }
  /deep/ .van-uploader__preview-delete {
    display: none;
  }
}
</style>
